<template>
  <a-row>
    <a-col :span="24">
      <a-form layout="inline">
        <a-form-item label="业务类型">
          <a-select v-model="searchForm.belongCompany" class="selectWidth">
            <a-select-option value>全部</a-select-option>
            <a-select-option value="JIA_HUA">佳华业务</a-select-option>
            <a-select-option value="JIA_TE">自营业务</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="订单类型">
          <a-select v-model="searchForm.orderType" class="selectInputWidth">
            <a-select-option key>全部</a-select-option>
            <a-select-option v-for="v in OrderOptions" :key="v.key">{{v.title}}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="日期">
          <a-range-picker @change="onChange">
            <a-icon slot="suffixIcon" type="calendar" />
          </a-range-picker>
        </a-form-item>

        <a-form-item>
          <a-button type="primary" @click="handleSubmit1">查询</a-button>
        </a-form-item>
      </a-form>

      <a-card style="text-align:center; margin-top:24px;">
        <a-col :span="8" class="assent">
          <div class="assent_mes">订单总耗油量(L)</div>
          <div class="assent_shu">{{detail.oilVolumeTotal}}</div>
        </a-col>
        <a-col :span="8">
          <div class="assent_mes">总完成箱量(个)</div>
          <div class="assent_shu">{{detail.containerNumTotal}}</div>
        </a-col>
        <a-col :span="8">
          <div class="assent_mes">总行驶公里数(km)</div>
          <div class="assent_shu">{{detail.mileageTotal}}</div>
        </a-col>
      </a-card>

      <a-table :columns="columns" :data-source="tableData" :loading="loading" :pagination="pagination" rowKey="orderTruckId" class="tableMargin">
        <template slot="rn" slot-scope="text, record, index">{{index + 1}}</template>
        <template slot="link" slot-scope="text, record">
          <a :href="`/landCenter/orderDispatch/${record.orderTruckId}`" target="_blank">{{text}}</a>
        </template>
      </a-table>
    </a-col>
</a-row>
</template>

<script>
import {queryTruckDriverOrderStatistics, queryTruckDriverOrderList} from '@/api/landCenter'
const OrderOptions = [
  {key: 'DOMESTIC_TRADE_EXPORTS', title: '内贸出口订单'},
  {key: 'DOMESTIC_TRADE_IMPORTS', title: '内贸进口订单'},
  {key: 'FOREIGN_TRADE_EXPORTS', title: '外贸出口订单'},
  {key: 'FOREIGN_TRADE_IMPORTS', title: '外贸进口订单'},
  {key: 'UNITED_TRANSPORT_EXPORTS', title: '联运出口订单'},
  {key: 'UNITED_TRANSPORT_IMPORTS', title: '联运进口订单'},
  {key: 'PURE_LAND_TRANSPORTS', title: '纯陆运订单'}
]

export default {
  name: 'driver-order-list',
  props: ['id'],
  data () {
    return {
      OrderOptions,
      detail: {},
      searchForm: {
        belongCompany: '',
        orderType: '',
        completeTime1: '',
        completeTime2: ''
      },
      columns: [
        {
          title: '序号',
          width: 60,
          scopedSlots: {customRender: 'rn'}
        },
        {
          title: '公司编号',
          dataIndex: 'truckOrderCode',
          scopedSlots: {customRender: 'link'}
        },
        {
          title: '业务类型',
          dataIndex: 'belongCompany',
          customRender: (text, row, index) => {
            if (text === 'JIA_HUA') {
              return '佳华业务'
            } else if (text === 'JIA_TE') {
              return '自营业务'
            }
          }
        },
        {
          title: '订单类型',
          dataIndex: 'orderType',
          customRender: (text) => {
            const t = OrderOptions.filter(v => v.key === text)[0]
            return t ? t.title : '--'
          }
        }, {
          title: '耗油量(L)',
          dataIndex: 'oilVolume'
        }, {
          title: '公里数(km)',
          dataIndex: 'mileage'
        }, {
          title: '车辆',
          dataIndex: 'tractorNumber',
          customRender: (text, row, index) => {
            return `${text || ''}${row.trailerNumber ? '·' + row.trailerNumber : ''}`
          }
        }, {
          title: '完成时间',
          dataIndex: 'completeTime'
        }
      ],
      tableData: [],
      loading: false,
      pagination: {},
      pageNum: 1,
      pageSize: 10
    }
  },
  created () {

  },
  methods: {
    handleSubmit1 () {
      this.pageNum = 1
      this.handleSubmit()
    },
    handleSubmit () {
      // 1
      queryTruckDriverOrderStatistics({
        ...this.searchForm,
        driverId: this.id
      }).then(rsp => {
        this.detail = rsp.data
      })

      // 2
      this.loading = true
      queryTruckDriverOrderList({
        ...this.searchForm,
        driverId: this.id,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(rsp => {
        this.loading = false
        this.tableData = rsp.data.list
        this.pagination = {
          current: this.pageNum,
          pageSize: rsp.data.pageSize,
          total: rsp.data.total,
          showQuickJumper: false,
          showSizeChanger: true,
          showTotal: total => `共${total}条记录 第${this.pageNum}/${rsp.data.pages}页`,
          onChange: pageNum => {
            this.pageNum = pageNum
            this.handleSubmit()
          },
          onShowSizeChange: (current, size) => {
            this.pageNum = current
            this.pageSize = size
            this.handleSubmit()
          }
        }
      }).catch(() => { this.loading = false })
    },
    onChange (date, dateStr) {
      this.searchForm.completeTime1 = dateStr[0]
      this.searchForm.completeTime2 = dateStr[1]
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.handleSubmit()
    })
  }
}
</script>

<style lang="less" scoped>
</style>
